<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/PlanList.css"/>
    <script type="text/javascript" src="js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="js/rem.js" ></script>
    <script type="text/javascript" src="js/mescroll.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
    <title>报计划</title>
</head>
<body>
<div id="mescroll">
    <ul class="list">
        <li>
		        		<a href="#">
			            <p class="info">第44周开会计划<span style="color: #999;">（2019.11.03~2019.11.9）</span></p>
			            <div class="date">
			                <span class="date_left">2019-09-27</span>
			                <span class="date_right submit">已提交</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
			            <p class="info">第44周开会计划<span style="color: #999;">（2019.11.03~2019.11.9）</span></p>
			            <div class="date">
			                <span class="date_left">2019-09-27</span>
			                <span class="date_right bohui">已驳回</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
			            <p class="info">第44周开会计划<span style="color: #999;">（2019.11.03~2019.11.9）</span></p>
			            <div class="date">
			                <span class="date_left">2019-09-27</span>
			                <span class="date_right caogao">草稿</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
			            <p class="info">第44周开会计划<span style="color: #999;">（2019.11.03~2019.11.9）</span></p>
			            <div class="date">
			                <span class="date_left">2019-09-27</span>
			                <span class="date_right pass">已通过</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
			            <p class="info">第44周开会计划<span style="color: #999;">（2019.11.03~2019.11.9）</span></p>
			            <div class="date">
			                <span class="date_left">2019-09-27</span>
			                <span class="date_right finish">已完成</span>
			            </div>
		            </a>
		       </li>
    </ul>
</div>
<a href="add.html"><div class="pay">新增</div></a>
</body>
<script>
  var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
    //如果下拉刷新是重置列表数据,那么down完全可以不用配置
    down: {
      callback: downCallback //下拉刷新的回调
    },
    up: {
      auto:false,//在初始化完毕之后自动执行下拉刷新的回调  true  false
      htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',
      page: {
        num: 0,
        size: 10,
        time: null
      },
      callback: upCallback    //上拉加载的回调
    }
  });

  var pageSize = 10;
  function downCallback(page) {
    $.ajax({
      url: 'http://oa.com/agent/manage/index&Pagesize='+pageSize+'&page=1',
      type: 'get',
      data:{},
      success: function (res) {
//      $('.list').html('');
        mescroll.resetUpScroll();
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }

    })
  }

  function upCallback(page) {
    $.ajax({
      url: 'http://oa.com/agent/manage/index&Pagesize='+pageSize+'&page='+page.num,
      type: 'get',
      success: function (res) {
        var list = res.rows.data;
        if(list.length > 0) { //有数据
          $('.list').append(render(list));
        }
        if (res.rows.data && res.rows.data.length == page.size) {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, true);
        } else {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, false);
        }
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }
    })
  }
  function render(data)
  {
    var html ='';
    $.each(data,function (index,value) {
      console.log(value);
      html +='<li><a><p class="info">'+value.title+'<span style="color: #999;">'+value.week+'</span></p>'
        +'<div class="date"><span class="date_left">'+value.updatetime+'</span><span class="date_right submit">'
        +value.state+'</span></div></a></li>';
    });
    return html;
  }
</script>
</html>